import React from 'react';

class App extends React.Component {
  state = {
    inputValue: '菠萝',
    list: ['新闻1', '新闻2']
  };
  // 获取表单值
  handleChange = (e) => {
    // console.log(e.target.value);
    this.setState({ inputValue: e.target.value });
  };

  // 点击发布按钮
  handleClick = () => {
    // 利用解构赋值获取数据
    let { inputValue, list } = this.state;

    if (inputValue.trim() === '') {
      alert('请输入内容');
      return;
    }

    // const fn1 = () => {
    //   // 检测数据是否有重复 - 数组去重
    //   list.unshift(inputValue);

    //   // list = [...new Set(list)];

    //   // 更新视图
    //   this.setState({ list, inputValue: '' });
    // };
    // fn1();

    const fn2 = () => {
      // indexOf 
      // 如果包含    返回索引值
      // 如果不包含  返回 -1
      if (list.indexOf(inputValue) === -1) {
        // 检测数据是否有重复 - 数组去重
        list.unshift(inputValue);
        // 更新视图
        this.setState({ list, inputValue: '' });
      }
    };
    fn2();
  };

  itemDelete = (index) => {
    const { list } = this.state;
    list.splice(index, 1);
    this.setState({ list });
  };
  render() {
    // 利用解构赋值获取数据
    const { list, inputValue } = this.state;
    return (
      <div className="App">
        <input type="text" value={inputValue} onChange={this.handleChange} />
        <button onClick={this.handleClick}>发布</button>
        <ol>
          {
            list.map((item, index) => <li onDoubleClick={() => this.itemDelete(index)} key={item}>{item}</li>)
          }
        </ol>
      </div>
    );
  }
}


export default App;
